<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基于Masonry瀑布流的全屏预览图片画廊插件</title>

<!--可无视-->
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">

<!--必要样式-->
<link rel="stylesheet" href="dist/stylesheets/chromagallery.min.css">

<style type="text/css">
body,html
{
	height: 100%;
}
.content
{
	width: 100%;
	height: 100%;
	margin: 10px auto;
}
@media screen and (min-width: 980px) /* Desktop */ {
  .content {
	width: 70%;
  }
}		
.mygallery
{
	margin: 25px 0;
}
</style>

<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

</head>
<body>
<h3>测试</h3>
<div class="content">
	<div class="chroma-gallery mygallery">
		<img src="images/thumbs/1.jpg" alt="Pic 1" data-largesrc="images/1.jpg" />
		<img src="images/thumbs/2.jpg" alt="Pic 2" data-largesrc="images/2.jpg" />
		<img src="images/thumbs/3.jpg" alt="Pic 3" data-largesrc="images/3.jpg" />
		<img src="images/thumbs/4.jpg" alt="Pic 4" data-largesrc="images/4.jpg" />
		<img src="images/thumbs/5.jpg" alt="Pic 5" data-largesrc="images/5.jpg" />
		<img src="images/thumbs/6.jpg" alt="Pic 6" data-largesrc="images/6.jpg" />
		<img src="images/thumbs/7.jpg" alt="Pic 7" data-largesrc="images/7.jpg" />
		<img src="images/thumbs/8.jpg" alt="Pic 8" data-largesrc="images/8.jpg" />
		<img src="images/thumbs/9.jpg" alt="Pic 9" data-largesrc="images/9.jpg" />
		<img src="images/thumbs/10.jpg" alt="Pic 10" data-largesrc="images/10.jpg" />
	</div>
</div>


<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="dist/scripts/chromagallery.pkgd.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".mygallery").chromaGallery
	({
		color:'#000',
		gridMargin:15,
		maxColumns:5,
		dof:true,
		screenOpacity:0.8
	});
});
</script>

</body>
</html>